<template>
  <div class="mainBox">
    <pageTitle Title="批次管理"></pageTitle>
    <div class="tools-box">
      <el-button @click="openAddDialog" type="primary">
        <el-space>
          <el-icon> <Plus /> </el-icon>添加批次
        </el-space>
      </el-button>
    </div>
    <div class="tableBar">
      <MyTable :tableData="tableData">
        <el-table-column
          type="index"
          width="100"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="批次编号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="name"
          label="批次名称"
          width="180"
          align="center"
        />
        <el-table-column prop="grade" label="年级" align="center">
          <template #default="scope">
            <span>{{ formatGrade(scope.row.grade) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <span>{{ batchStatus[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="考试日期" align="center" />
        <el-table-column prop="point" label="满分值" align="center" />
        <el-table-column prop="pubTime" label="发布时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-space>
              <el-button
                size="small"
                type="primary"
                @click="handleBatchEdit(scope.$index, scope.row)"
              >
                <el-space>
                  <el-icon> <Edit /> </el-icon>修改</el-space
                ></el-button
              >

              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                <el-space>
                  <el-icon> <Delete /> </el-icon>删除
                </el-space></el-button
              >
            </el-space>
          </template>
        </el-table-column>
      </MyTable>
    </div>
  </div>
  <!-- 添加批次 -->
  <AddBatchDialog
    v-model:show="addDiglogShow"
    @updateList="handleUpdateList"
  ></AddBatchDialog>
  <!-- 编辑批次 -->
  <EditBatchDialog
    v-model:show="editDialogShow"
    :echoData="rowData"
    @updateList="handleUpdateList"
  ></EditBatchDialog>
</template>

<script setup>
import AddBatchDialog from "./components/add.vue";
import EditBatchDialog from "./components/edit.vue";
const addDiglogShow = ref(false);
const editDialogShow = ref(false);
import { getBatchList, deleteBatch } from "@/Api/pc";
import { gradeMap, batchStatus } from "@/constant";
import { useMessage } from "@/utils/utils";
import { showMessage } from "@/utils";

const tableData = ref([]);
const rowData = ref();
const openAddDialog = () => {
  addDiglogShow.value = true;
};

const function_deleteBatch = async (batchCode) => {
  const response = await deleteBatch(batchCode);
  const { code, msg } = response;
  if (code === 0) {
    showMessage("success", `${msg}`);
    getDataSource();
  }
};

const formatGrade = (param) => {
  const grade = param.substring(0, 2);
  const startYear = param.substring(param.length - 2);
  return gradeMap[grade] + "20" + startYear + "级";
};
const handleDelete = (_, row) => {
  useMessage("确认删除该考试批次吗", () => {
    const { code } = row;
    if (!code) return;
    function_deleteBatch(code);
  });
};

const handleUpdateList = () => {
  getDataSource();
};

const handleBatchEdit = (_, row_data) => {
  rowData.value = row_data;
  editDialogShow.value = true;
};
const getDataSource = async () => {
  const response = await getBatchList();
  const { code, obj } = response;
  if (code === 0) {
    tableData.value = obj;
  }
};

onMounted(() => {
  getDataSource();
});
</script>

<style lang="scss" scoped>
.tools-box {
  height: 6rem;
  line-height: 4rem;
  padding: 1rem 0;
  margin-top: 1rem;
}
@import "@/assets/css/mycss.css";
</style>
